<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法1：插值表达式、data、methods、computed和watch</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1：插值表达式</h1>
            <p>变量：{{msg}}</p>
            <P>表达式{{5*6-10}}</P>
            <p>表达式{{num+1}}</p>
            <p>条件表达式{{1+1==2?1:0}}</p>
            <p>函数{{add()}}</p>
        <!-- {{}}插值表达式符号 -->
        <h1>知识点2：data</h1>
            <h3>可以再控制台中用实例名.$data访问数据</h3>
        <h1>知识点3：methods</h1>
            <h3>方法名(){} 或者 方法名:function(){}</h3>
            <p>{{sub(1000)}}</p>
        <h1>知识点4：computed计算属性</h1>
            <h3>遇到复杂问题时，vue.js提倡我们使用computed计算属性，
                在计算属性里面，我们可以完成各种比较复杂的逻辑，包括逻辑运算，函数调用等，最后只要返回一个结果即可
            </h3>
            <p>{{rev}}</p>
            <p>{{revmethod()}}</p>
            <p>{{double}}</p>
            <h3>计算属性是基于其依赖的变量进行缓存的，计算属性只有在它相关的依赖发生改变的时候才会重新求值。
                而方法则是每次页面重新渲染时都会进行计算
            </h3>
            <h3>通常我们的计算属性都是只读的，不能进行修改</h3>
            <button @click="double++">尝试修改计算属性的值</button>
            <h3>通过传入一个包含get和set函数的对象，可以得到一个可读可写的计算属性</h3>
            <h3>绝大多数情况下，只会使用默认的get函数来读取一个计算属性，在实际业务中很少使用到set</h3>
            <h3>因此在使用时通常直接用默认写法，不必将get和set都声明</h3>
        <h1>知识点5 watch 监听</h1>
            <h3>当我们需要在某种状态变化时，执行的一些其他的操作，watch具有状态监听的功能，
                只要监听到当前vue实例中的数据变化，就会调用数据所绑定的方法
            </h3>
            <h4>1.函数侦听器：在watch选项中声明的函数即为函数式侦听器 其中函数名就是侦听的数据源</h4>
            <h4>2.对象侦听器：在watch选项中声明的对象即为对象式侦听器 其中对象名就是侦听的数据源</h4>
            <h4>如果监听的需求比较简单，也不会涉及日后的拓展，就可以直接使用函数式监听器
                如果监听比较复杂，比如监听有多层对象，或者需要用到immediate属性，或者方便日后拓展，就用对象式
            </h4>
        <!--  -->
    </div>
</body>
</html>

<script>
    const appConn = Vue.createApp({
        //data里面放置全部的数据，包括变量，对象等
        data(){
            return{
                msg:'我的第一个页面',
                num:1,
                grade:60,
                users:{
                    name:"111",
                    age:18
                }
            }
        },
        //methods里面放置全部的方法
        methods:{
            add(){
                return this.num+100
            },
            sub:function(val){
                return this.num-val
            },
            revmethod(){
                console.log("方法");
                return this.msg.split('').reverse().join('')
            }
        },
        computed:{
            rev(){
                console.log("计算属性");
                return this.msg.split('').reverse().join('')
            },
            double:{
                get:function(){return this.num*2},
                set:function(val){this.num=val/2}
            }
        },
        watch:{
            grade(newData,oldData){
                console.log("改变前的数据："+oldData);
                console.log("改变后的数据："+newData);
                if(newData>oldData) console.log("+++");
                else console.log("---");
            },
            //对象式侦听器
            'users.age':{
                handler(newData,oldData){
                    console.log("改变前的年龄："+oldData);
                    console.log("改变后的年龄："+newData);
                    if(newData>=120||newData<1) console.log("???");
                }
            }
        }
    }).mount("#app")
</script>